<template>
	<view>
		<!-- 顶部 -->
		<view class="market_top">
			<view>累计佣金：{{total_commission||0}}元</view>
		</view>
		<!-- 选项卡 -->
		<view class="top_tab">
			<view class="tab_item" :class="{active:active==index}" @click="TabNav(index)" v-for="(item,index) in list" :key="index">{{item}}</view>
		</view>
		
		
		
		<!--  -->
		<view v-for="(item,index) in ListInfo" :key="index">
		<view class="market_line flex_center_between">
			<view class="color flex_center">
				<view class="market_header">
					<image :src="item.avator||'/static/images/userImg111.png'" style=""></image>
				</view>
				<view>{{item.buyer_name}}</view>
			</view>
			<view>￥:{{item.order_amount}}元</view>
			<!-- <view class="color">{{item.state_desc}}</view> -->
		</view>
		<view class=" market_shop flex_center_between" v-for="(value,_index) in item.extend_order_goods" :key="_index" style="padding: 20rpx 0; ">
			<!-- <view class="flex_center_between" v-for="(value2,index2) in value.extend_order_goods" :key="index2" > -->
				<view class="flex_center">
					<image :src="value.goods_image_url"></image>
					<view>
						<view class="back texthied" >{{value.goods_name}}</view>
						<view>x{{value.goods_num}}</view>
					</view>
				</view>
				<view class="text_center">
					<view>预计</view>
					<view>￥{{value.commission}}</view>
				</view>
			<!-- </view> -->
		</view>

		
	
		<!--  -->
		<view class="order">
			<view class="order_info">
			<!-- 	<view v-if="item.uni_level==1">分销等级：一级</view>
				<view v-if="item.uni_level==2">分销等级：二级</view>
				<view v-if="item.uni_level==3">分销等级：三级</view> -->
				<view>订单编号：{{item.order_sn}}</view>
				<view>下单时间：{{item.add_time |formaDate}}</view>
			</view>
			<view class="flex_center_between order_money">
				<view></view>
				<view class="back">预计佣金：{{item.commission}}</view>
			</view>
		</view>
	</view>		

		<view v-if="ListInfo.length<=0" class="IfNull">
			<image style="width: 100%" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:["全部",'待结算','已结算'],
				active:0,
				curpage:1,
				ListInfo:"",
				total_commission:0//累计佣金
			}
		},
		onShow() {
			this.getListInfo();
		},
		
		onReachBottom() {
			console.log(this.curpage)
			if(this.curpage){
				this.getListInfo(true)
			}else{
				uni.showToast({
					title:'已是最后一页！',
					icon:'none'
				})
			}
		},
		methods:{
			TabNav(index){
				this.curpage=1
				this.active=index;
				this.getListInfo();
			},
			getListInfo(stat,type){
				let that=this;
				this.$util.request({
					url:'/mobile/index.php?act=distribution&op=getOrderList',
					method:"get",
					data:{type:that.active}
				}).then(res=>{
					console.log(res)
					if(stat){
						that.ListInfo=that.ListInfo.concat(res.datas.order_group_list) ;
					}else{
						that.ListInfo=res.datas.order_group_list;
					}
					this.total_commission=res.datas.total_commission
					if(that.curpage>=res.datas.page_info.page_total){
						that.curpage=false;
					}else{
						that.curpage++;
					}
				})
			}
		}
	}
</script>

<style scoped>
	.texthied{
		width: 450rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.IfNull{
		font-weight: bold;
		text-align: center;
		font-size: 30rpx;
	}
	.order{
		background-color: #FFFFFF;;
	}
	.order_info{
		border-bottom: 1rpx solid #F0F0F0;padding: 10rpx 20rpx;
	}
	.order_money{
		height: 80rpx;
		padding-right:20rpx;
	}
	.back{
		color: #333333;
	}
	.market_shop{
		padding:0 20rpx;
		/* margin: 20rpx 0; */
	}
	.market_shop image{
		height: 100rpx;width: 100rpx;margin: 0 30rpx 0 10rpx;
	}
	.text_center{
		text-align: center;
		margin-right: 30rpx;
	}
	.market_line{
		height: 86rpx;background-color: #FFFFFF;margin-top: 20rpx;padding: 0 20rpx;
	}
	.flex_center_between{
		display: flex; justify-content: space-between;align-items: center;
	}
	.flex_center{
		display: flex;align-items: center;
	}
	.color{
		color: #666666;
	}
	.market_header{
		height: 60rpx;width: 60rpx;margin: 0 20rpx;
	}
	.market_header image{
		height: 100%;width: 100%;
	}
	/* 顶部 */
	.market_top{
		background-color: #ff4300;height: 100rpx;padding-left: 30rpx;color: #FFFFFF;
	}
	.market_top view{
		line-height: 100rpx;
	}
	/* 选项卡 */
	.top_tab{
		width: 100%;background-color: #FFFFFF;display: flex;text-align: center;
	}
	.tab_item{
		width: 33%;height: 82rpx;line-height: 82rpx;
	}
	.active{
		border-bottom: 5rpx solid #ff4300;color: #ff4300;
	}
</style>
